<style scoped lang="scss">
.main {
  width: 80vw;
  height: 80vh;
  padding: 10vh 10vw;
  background-color: #2d3748;
}
.n-card {
  width: 15vw;
}
.n-h2 {
  text-align: center;
}
</style>

<template>
  <div class="main">
    <n-flex justify="center">
      <n-card v-if="pdfList.length === 0">
        <n-result status="404" title="404 资源不存在" description="生活总归带点荒谬">
          <template #footer>
            <n-button>找点乐子吧</n-button>
          </template>
        </n-result>
      </n-card>
      <div v-else>
        <n-card v-for="pdf in pdfList" :key="pdf.id">
          <n-h2>
            <n-text type="info">
              <n-badge :value="pdf.status_name" v-if="pdf.status === 2" :offset="[22, 4]" type="error">
                {{ pdf.name }}
              </n-badge>
              <n-badge :value="pdf.status_name" v-else :offset="[22, 4]" type="success">
                {{ pdf.name }}
              </n-badge>
            </n-text></n-h2
          >
          <n-blockquote align-text>
            {{ pdf.docmindId }}
          </n-blockquote>
        </n-card>
      </div>
    </n-flex>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getPdfList } from '@/api/pdf'

const pdfList = ref([])

onMounted(async () => {
  try {
    const response = await getPdfList()
    if (response.data) {
      pdfList.value = response.data
    }
  } catch (error) {
    console.error('获取 PDF 列表时出错:', error)
  }
})
</script>
